<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}IT课程数据分析系统{% endblock %}</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: #f5f7fa;
            color: #333;
        }
        
        .navbar {
            background: #2c3e50;
            color: white;
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .navbar-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .navbar h1 {
            font-size: 1.5rem;
            font-weight: 600;
        }
        
        .navbar-menu {
            display: flex;
            gap: 2rem;
            align-items: center;
        }
        
        .navbar-menu a {
            color: white;
            text-decoration: none;
            transition: opacity 0.3s;
        }
        
        .navbar-menu a:hover {
            opacity: 0.8;
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: #3498db;
            color: white;
        }
        
        .btn-primary:hover {
            background: #2980b9;
        }
        
        .btn-danger {
            background: #e74c3c;
            color: white;
        }
        
        .btn-danger:hover {
            background: #c0392b;
        }
        
        .container {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .card-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #2c3e50;
        }
        
        .alert {
            padding: 1rem;
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        
        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .alert-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .loading {
            text-align: center;
            padding: 2rem;
            color: #7f8c8d;
        }
        
        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body>
    {% block navbar %}
    <nav class="navbar">
        <div class="navbar-content">
            <h1 id="site-title">📊 IT课程数据分析系统</h1>
            <div class="navbar-menu" id="navbar-menu">
                <!-- 动态加载菜单 -->
            </div>
        </div>
    </nav>
    {% endblock %}
    
    <div class="container">
        {% block content %}{% endblock %}
    </div>
    
    <script>
        // 通用工具函数
        const API_BASE = '/api/v1';
        
        // 获取token
        function getToken() {
            return localStorage.getItem('access_token');
        }
        
        // 设置token
        function setToken(token) {
            localStorage.setItem('access_token', token);
        }
        
        // 清除token
        function clearToken() {
            localStorage.removeItem('access_token');
            localStorage.removeItem('user_info');
        }
        
        // API请求封装
        async function apiRequest(url, options = {}) {
            const token = getToken();
            const headers = {
                'Content-Type': 'application/json',
                ...options.headers
            };
            
            if (token) {
                headers['Authorization'] = `Bearer ${token}`;
            }
            
            try {
                const response = await fetch(API_BASE + url, {
                    ...options,
                    headers
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    if (response.status === 401) {
                        clearToken();
                        window.location.href = '/login';
                        throw new Error('认证失败，请重新登录');
                    }
                    throw new Error(data.error || '请求失败');
                }
                
                return data;
            } catch (error) {
                console.error('API请求错误:', error);
                throw error;
            }
        }
        
        // 格式化学期显示
        function formatSemester(course) {
            // 优先使用新格式：academic_year + semester_term
            if (course.academic_year && course.semester_term) {
                const termMap = {
                    '1': '第一学期',
                    '2': '第二学期',
                    '3': '第三学期',
                    1: '第一学期',
                    2: '第二学期',
                    3: '第三学期'
                };
                const termName = termMap[course.semester_term] || `第${course.semester_term}学期`;
                return `${course.academic_year}学年 ${termName}`;
            }
            // 兼容旧格式：semester字段
            if (course.semester) {
                return course.semester;
            }
            return '-';
        }
        
        // 显示提示消息
        function showAlert(message, type = 'info') {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type}`;
            alertDiv.textContent = message;
            
            const container = document.querySelector('.container');
            container.insertBefore(alertDiv, container.firstChild);
            
            setTimeout(() => {
                alertDiv.remove();
            }, 5000);
        }
        
        // 登出
        async function logout() {
            try {
                await apiRequest('/auth/logout', { method: 'POST' });
                clearToken();
                window.location.href = '/login';
            } catch (error) {
                console.error('登出失败:', error);
                clearToken();
                window.location.href = '/login';
            }
        }
        
        // 加载系统配置
        async function loadSystemConfig() {
            try {
                // 使用公开接口，不需要认证
                const response = await fetch(API_BASE + '/settings/public');
                const data = await response.json();
                
                if (data.success) {
                    const config = data.data;
                    // 更新站点标题
                    if (config.site_name) {
                        const titleElement = document.getElementById('site-title');
                        if (titleElement) {
                            titleElement.textContent = '📊 ' + config.site_name;
                        }
                        // 同时更新页面标题
                        if (document.title.includes('IT课程数据分析系统')) {
                            document.title = document.title.replace('IT课程数据分析系统', config.site_name);
                        }
                    }
                    
                    // 保存到localStorage以便其他页面使用
                    localStorage.setItem('site_config', JSON.stringify(config));
                }
            } catch (error) {
                console.log('加载系统配置失败:', error);
            }
        }
        
        // 加载导航菜单
        function loadNavMenu() {
            const userInfo = JSON.parse(localStorage.getItem('user_info') || '{}');
            const menuContainer = document.getElementById('navbar-menu');
            
            if (userInfo.role) {
                let menuHTML = '';
                
                if (userInfo.role === 'admin') {
                    menuHTML = `
                        <a href="/admin/dashboard">管理员仪表盘</a>
                        <a href="/admin/users">用户管理</a>
                        <a href="/admin/courses">课程管理</a>
                        <a href="/admin/import">数据导入</a>
                        <a href="/admin/settings">系统设置</a>
                    `;
                } else if (userInfo.role === 'teacher') {
                    menuHTML = `
                        <a href="/teacher/dashboard">教师仪表盘</a>
                        <a href="/teacher/courses">我的课程</a>
                        <a href="/teacher/students">学生管理</a>
                        <a href="/teacher/course-edit">课程编辑</a>
                    `;
                } else if (userInfo.role === 'student') {
                    menuHTML = `
                        <a href="/student/dashboard">学生仪表盘</a>
                        <a href="/student/courses">选课管理</a>
                        <a href="/student/dashboard#recommendations">课程推荐</a>
                    `;
                }
                
                menuHTML += `
                    <span>欢迎, ${userInfo.username}</span>
                    <button class="btn btn-danger" onclick="logout()">登出</button>
                `;
                
                menuContainer.innerHTML = menuHTML;
            }
        }
        
        // 页面加载时初始化
        window.addEventListener('DOMContentLoaded', function() {
            if (window.location.pathname !== '/login') {
                loadNavMenu();
            }
            // 所有页面都加载系统配置
            loadSystemConfig();
        });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>

